<template>
  <div class="app-page-scroll">
    <t-card header="基础用法">
      <div class="cpm-separator">Number：:value="30"</div>
      <lg-countdown :value="value" @stop="stop"></lg-countdown>

      <div class="cpm-separator">Date：:value="date"</div>
      <lg-countdown :value="date"></lg-countdown>

      <div class="cpm-separator">String：:value="str"</div>
      <lg-countdown :value="str"></lg-countdown>
    </t-card>

    <t-card header="插槽">
      <div class="cpm-separator">插槽自定义显示</div>
      <lg-countdown v-slot="{ d, h, m, s }" :value="str"> {{ d }}天 {{ h }}小时 {{ m }}分钟 {{ s }}秒 </lg-countdown>

      <div class="cpm-separator">观察插槽参数</div>
      <lg-countdown v-slot="scope" :value="str">{{ scope }}</lg-countdown>
    </t-card>

    <!---------------------------------   api说明文档      -------------------------------------------->
    <t-card header="属性">
      <t-base-table :columns="propColumns" :data="propsData" style="width: 100%" />
    </t-card>
    <t-card header="事件">
      <t-base-table :columns="emitColumns" :data="emitData" style="width: 100%" />
    </t-card>
    <t-card header="插槽">
      <t-base-table :columns="slotColumns" :data="slotData" style="width: 100%" />
    </t-card>
    <t-card header="api">
      <t-base-table :columns="apiColumns" :data="apiData" style="width: 100%" />
    </t-card>
  </div>
</template>
<script lang="ts" setup>
import './index.less';
import { ref } from 'vue';
import { dateFormat, LgCountdown } from '@/soar';
import { apiColumns, emitColumns, propColumns, slotColumns } from './index';

const value = ref(30);
const time = new Date();
time.setHours(time.getHours() + 30);
const date = new Date(time);
time.setDate(time.getDate() + 17);
const str = dateFormat(time);

function stop() {
  alert('倒计时已停止');
}

const propsData = [{ name: 'value', desc: '倒计时的值，必填', type: 'string | Date | Number', def: '' }];

const emitData = [{ name: 'stop', desc: '倒计时结束时触发', param: '' }];

const apiData = [
  // { name: 'code', desc: '字典code', type: 'string', sample: '' },
];

const slotData = [{ name: 'default', desc: '默认，自由渲染', scope: 'd, h, m, s, count, text, hh, mm, ss, stopped' }];
</script>
